<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash-icon.png">
<link rel="apple-touch-startup-image" href="images/splash-screen.png" 			media="screen and (max-device-width: 320px)" />  
<link rel="apple-touch-startup-image" href="images/splash-screen@2x.png" 		media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/splash-screen-ipad-portrait-retina.png"   media="(device-width: 768px)	and (orientation: portrait)	and (-webkit-device-pixel-ratio: 2)"/>
<link rel="apple-touch-startup-image" sizes="1496x2048" href="images/splash-screen-ipad-landscape-retina.png"   media="(device-width: 768px)	and (orientation: landscape)	and (-webkit-device-pixel-ratio: 2)"/>
<title>z--The world</title>
<link href="css/style.css"     		 rel="stylesheet" type="text/css">
<link href="css/framework.css" 		 rel="stylesheet" type="text/css">
<link href="css/menu.css" 		 	 rel="stylesheet" type="text/css">
<link href="css/owl.theme.css" 		 rel="stylesheet" type="text/css">
<link href="css/swipebox.css"		 rel="stylesheet" type="text/css">
<link href="css/font-awesome.css"	 rel="stylesheet" type="text/css">
<link href="css/animate.css"			 rel="stylesheet" type="text/css">
<script src="js/glovebox.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<script type="text/javascript" src="js/framework.plugins.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="preloader">
	<div id="status">
    	<p class="center-text">
			正在加载中...
            <em>尊敬的大人:小人正在努力奔跑中 还请稍等</em>
        </p>
    </div>
</div>
<div class="all-elements">
<div id="perspective" class="perspective effect-airbnb"><!--this houses the entire page, and creates the effect-->
    <div class="header">
        <a href="#" id="showMenu"><i class="fa fa-navicon"></i></a>
        <a href="#" id="pageLogo"><img src="images/z.png" alt="img"></a>
        <a href="#" id="openMail"><i class="fa fa-envelope-o"></i></a>
    </div> 	
    <div class="outer-nav">
        <div class="inner-nav">
            <div class="nav-item">
                <a href="index.html" class="active-item">
                    <i class="nav-icon fa fa-home"></i>
                    主页
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-cog"></i>
                    心声
                </a>
                <div class="nav-sub-item">
                    <a href="features-type.html">To--mother</a>
                    <a href="features-jquery.html">To--father</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-camera"></i>
                    瞬间
                </a>
                <div class="nav-sub-item">
                    <a href="gallery-wide.html">Thumbs Wide</a>
                    <a href="gallery-round.html">Thumbs Round</a>
                    <a href="gallery-square.html">Thumbs Square</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-picture-o"></i>
                   记录
                </a>
                <div class="nav-sub-item">
                    <a href="portfolio-adaptive.html">Adaptive</a>
                    <a href="portfolio-one.html">One Column</a>
                    <a href="portfolio-two.html">Two Columns</a>
                    <a href="portfolio-wide.html">Wide Columns</a>
                </div>
            </div>
            <div class="nav-item">
                <a href="#" class="deploy-nav-sub-item">
                    <i class="nav-icon fa fa-files-o"></i>
                    Pages
                </a>
                <div class="nav-sub-item">
                    <a href="page-soon.html">Soon Page</a>
                    <a href="page-error.html">Error Page</a>
                    <a href="page-profile.html">Profile Page</a>
                    <a href="page-timeline.html">Timeline Page</a>
                    <a href="page-updates.html">Updates Page</a>
                </div>
            </div>
           
            <div class="nav-item">
                <a id="closeMenu" href="#">
                    <i class="nav-icon fa fa-times"></i>
                    关闭
                </a>
            </div>
        </div>
    </div>
    <div class="perspective_container"><!--the "moving to the left" content box-->
        <div class="wrapper"><!-- wrapper needed for scroll -->
         	<div class="header-clear"><i class="fa fa-times"></i></div>
            <div class="slider-container full-bottom">
                <div class="homepage-slider" data-snap-ignore="true">                
                    <div>
                        <div class="overlay"></div>
                        <div class="homepage-slider-caption">
                            <h3>Look me</h3>
                            <p>Do You Love Me !</p>
                        </div>
                        <img src="images/3ww.jpg" class="responsive-image" alt="img">
                    </div>
                    <div>
                        <div class="overlay"></div>
                        <div class="homepage-slider-caption">
                            <h3>beautiful</h3>
                            <p>Is So Beautiful!</p>
                        </div>
                        <img src="images/5ww.jpg" class="responsive-image" alt="img">
                    </div>
                    <div>
                        <div class="overlay"></div>
                        <div class="homepage-slider-caption">
                            <h3>Blue Sky</h3>
                            <p>The Blue Sky And White Clouds</p>
                        </div>
                        <img src="images/6ww.jpg" class="responsive-image" alt="img">
                    </div>
                </div>
            </div>
            <div class="content">
            	<div class="page-heading container">
                    <p>
						欢迎来到 z 的个人世界。<br />通过此处，希望你能发现我的发光之处
                    </p>
                    <a href="#">@ This Is My World - z</a>
                </div>    
                <div class="decoration"></div>        
            </div>
            <div class="content-strip">
                <h4>Services</h4>
                <p>The things we love to do, for you!</p>
                <i class="fa fa-cogs"></i>
                <div class="overlay"></div>
                <img src="images/5w.jpg" alt="img">
            </div>
            <div class="content">
            	<div class="decoration"></div>
                <div class="container no-bottom">
                    <div class="one-half-responsive">
                        <p class="thumb-left no-bottom">
                            <img src="images/1s.jpg" alt="img">
                            <strong>Responsive Template</strong>
                            <em><br>Lorem Ipsum is simply dummy text of the printing and types. </em>
                        </p>
                        <div class="thumb-clear"></div>
                    </div>
                    <div class="decoration hide-if-responsive"></div>
                    <div class="one-half-responsive last-column">        
                        <p class="thumb-right no-bottom">
                            <img src="images/2s.jpg" alt="img">
                            <strong>CSS3 Designed</strong>
                            <em><br>Lorem Ipsum is simply dummy text of the printing and types. </em>
                        </p>
                        <div class="thumb-clear"></div>
                    </div>
                    <div class="decoration hide-if-responsive"></div>
                    <div class="one-half-responsive">
                        <p class="thumb-left no-bottom">
                            <img src="images/3s.jpg" alt="img">
                            <strong>Mobile and Tablet</strong>
                            <em><br>Lorem Ipsum is simply dummy text of the printing and types. </em>
                        </p>
                        <div class="thumb-clear"></div>
                    </div>
                    <div class="decoration hide-if-responsive"></div>
                    <div class="one-half-responsive last-column">        
                        <p class="thumb-right no-bottom">
                            <img src="images/4s.jpg" alt="img">
                            <strong>Fast Loading</strong>
                            <em><br>Lorem Ipsum is simply dummy text of the printing and types. </em>
                        </p>
                        <div class="thumb-clear"></div>
                    </div>
                </div>
			</div>
            <div class="content-strip">
                <h4>The Staff</h4>
                <p>Meet our awesome staff!</p>
                <i class="fa fa-user"></i>
                <div class="overlay"></div>
                <img src="images/6w.jpg" alt="img">
            </div>         
            <div class="content">
                <div class="decoration"></div>
                <div class="container">
                    <a href="#" class="next-staff"></a>
                    <a href="#" class="prev-staff"></a>
                    <div class="staff-slider">
                        <div>
                            <div class="staff-item">
                                <img src="images/1s.jpg" alt="img">
                                <h4>John Doe</h4>
                                <em>Web Designer</em>
                                <strong>We love quotes, and sometimes it's annoying to see tons of them that you need to scroll to!</strong>
                                <a href="#" class="button button-red center-button">Call</a>
                            </div>
                        </div>
                        <div>
                            <div class="staff-item">
                                <img src="images/2s.jpg" alt="img">
                                <h4>Jane Hidden</h4>
                                <em>Front End Developer</em>
                                <strong>We love quotes, and sometimes it's annoying to see tons of them that you need to scroll to!</strong>
                                <a href="#" class="button button-green center-button">Text</a>
                            </div>
                        </div>
                        <div>
                            <div class="staff-item">
                                <img src="images/3s.jpg" alt="img">
                                <h4>Johanna Pear</h4>
                                <em>Business Manager</em>
                                <strong>We love quotes, and sometimes it's annoying to see tons of them that you need to scroll to!</strong>
                                <a href="#" class="button button-blue center-button">Mail</a>
                            </div>
                        </div>
                        <div>
                            <div class="staff-item">
                                <img src="images/4s.jpg" alt="img">
                                <h4>Mike Grape</h4>
                                <em>Web Designer</em>
                                <strong>We love quotes, and sometimes it's annoying to see tons of them that you need to scroll to!</strong>
                                <a href="#" class="button button-dark center-button">Read More</a>
                            </div>
                        </div>
                        <div>
                            <div class="staff-item">
                                <img src="images/5s.jpg" alt="img">
                                <h4>Victor Leaf</h4>
                                <em>Front End Developer</em>
                                <strong>We love quotes, and sometimes it's annoying to see tons of them that you need to scroll to!</strong>
                                <a href="#" class="button button-orange center-button">Facebook</a>
                            </div>
                        </div>
                        <div>
                            <div class="staff-item">
                                <img src="images/6s.jpg" alt="img">
                                <h4>Snow White</h4>
                                <em>Business Manager</em>
                                <strong>We love quotes, and sometimes it's annoying to see tons of them that you need to scroll to!</strong>
                                <a href="#" class="button button-yellow center-button">Twitter</a>
                            </div>
                        </div>
                    </div>
                </div>  
                <div class="decoration"></div>
            </div>
            <div class="content-strip">
                <h4>Featured Project</h4>
                <p>Check and enjoy our featured item</p>
                <i class="fa fa-star-o"></i>
                <div class="overlay"></div>
                <img src="images/7w.jpg" alt="img">
            </div>
            
            <div class="content">
                <div class="decoration"></div>
                    <div class="container">
                        <div class="one-half-responsive">
                            <img src="images/mobile.png" alt="img" class="responsive-image">
                        </div>
                        <div class="one-half-responsive last-column">
                            <h3 class="center-if-mobile">Awesome project title</h3>
                            <em class="center-if-mobile small-text">Awesome project subtitle</em>
                            <p class="center-if-mobile no-bottom">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in quam mauris. 
                                Nam condimentum convallis lectus, ac tempus massa eleifend sit amet. Ut nec orci 
                                ut urna mollis elementum a et diam. Donec varius orci a convallis convallis. 
                            </p>
                        </div>
                    </div>
                <div class="decoration"></div>
            </div>
            
            <div class="content-strip">
            	<h4>Testimonials</h4>
                <p>What our customers are saying</p>
                <i class="fa fa-user"></i>
                <div class="overlay"></div>
                <img src="images/6w.jpg" alt="img">
            </div>
            
            <div class="content">
            	<div class="decoration"></div>
                
                <div class="quote-slider full-bottom">
                	<div>
                    	<h4>
							Great all around product, with some of the best documentation I have ever seen. Really thorough and easy to follow! 
                            Also the support responsiveness is really fantastic. Extremely happy with everything. Thanks again!
                        </h4>
                        <a href="#">ChrisPizzoDesign - ThemeForest</a>
                    </div>
                    <div>
                    	<h4>
							Exceptional theme. Completely customisable and the best customer service I've ever had from a theme/plugin. Not only are 
                            they fast but they are polite and don't make you feel like a doofus even when you are probably being one.                        
                        </h4>
                        <a href="#">larzick27 - ThemeForest</a>
                    </div>
                    <div>
                    	<h4>
							One of the best themes I've used so far and it is very well documented, coded and very clean. Got it intergrated with 
                            wordpress in less than an hour! But this is an amazing template built with a load of features!
                        </h4>
                        <a href="#">ramseycosay18 - ThemeForest</a>
                    </div>
                </div>
                
                <div class="decoration"></div>            
            </div>
            
            
            <div class="content-strip">
                <h4>Recent works</h4>
                <p>On a touch image gallery</p>
                <i class="fa fa-picture-o"></i>
                <div class="overlay"></div>
                <img src="images/5w.jpg" alt="img">
            </div>
            
            <div class="content">
                <div class="decoration"></div>
                <div class="container">
                    <p class="no-bottom">
                        A touch image gallery is here to complete the template, 
                        you can add titles, and text, or simply leave the thumbnails 
                        there with no text around them! Nothing complicated, 
                        just a copy paste!
                    </p>
                </div>         
    
                <ul class="gallery">
                    <li>
                        <a class="swipebox" href="images/1.jpg" title="An image caption!">
                        <img src="images/1s.jpg" alt="img" />
                        <br>
                        Grass near the ocean
                        </a>
                    </li>
                    <li>
                        <a class="swipebox" href="images/2.jpg" title="It can change!">
                        <img src="images/2s.jpg" alt="img" />
                        <br>
                        Pine forest near sea
                        </a>
                    </li>
                    <li>
                        <a class="swipebox" href="images/3.jpg" title="To be whatever you want!">
                        <img src="images/3s.jpg" alt="img" />
                        <br>
                        Sunset in the big city
                        </a>
                    </li>
                    <li>
                        <a class="swipebox" href="images/4.jpg" title="It's connected to the href!">
                        <img src="images/4s.jpg" alt="img" />
                        <br>
                        Mountains near sea
                        </a>
                    </li>
                    <li>
                        <a class="swipebox" href="images/5.jpg" title="Easy to change and edit!">
                        <img src="images/5s.jpg" alt="img" />
                        <br>
                        Wind in a grain field
                        </a>
                    </li>
                    <li>
                        <a class="swipebox" href="images/6.jpg" title="What an awesome gallery!">
                        <img src="images/6s.jpg" alt="img" />
                        <br>
                        House in a grain field
                        </a>
                    </li>
                </ul>   
                <div class="decoration"></div>        
            </div>
            <div class="footer-section">
                <p class="footer-text">
                    Copyright: 2014 To 2015.<br>
                     Phone:15521074692 Support:z  <br />
                  Location:广州  Postalcode:510000 
                </p>
                <div class="footer-icons">
                    <a  class="footer-facebook-icon"><i class="fa fa-facebook"></i></a>
                    <a class="footer-google-icon"><i class="fa fa-google-plus"></i></a>
                    <a  class="footer-twitter-icon"><i class="fa fa-twitter"></i></a>
                    <a  class="footer-up-icon"><i class="fa fa-angle-up"></i></a>
                </div>
            </div>
        
        </div><!-- wrapper -->
    </div><!-- /perspective container -->
</div><!-- /perspective -->
</div>
<script type="text/javascript" src="js/menu.js"></script>
</body>
</html>
